<%--
  Created by IntelliJ IDEA.
  User: ahgiy
  Date: 2023/6/29
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新增药品页面</title>
    <script src="./js/vue.js"></script>
    <script src="./elementui/index.js" type="module"></script>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
    <script src="//unpkg.com/element-ui@2.15.13/lib/index.js" ></script>
    <link rel="stylesheet" href="//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
</head>
<body>
    <div id="add">
        <el-page-header @back="goBack" content="药品信息新增页面">
        </el-page-header>
        <el-alert v-if="showSuccessAlert" title="操作提示：" type="success" show-icon @close="showSuccessAlert = false" @click="goBack()">
            添加成功！
        </el-alert>
        <el-alert v-if="showErrorAlert" title="操作提示：" type="error" description="添加失败" show-icon @close="showSuccessAlert = false">
        </el-alert>

        <el-form :model="form" :rules="rules" ref="form" label-width="80px" style="width: 500px;margin: 0 auto;margin-top: 100px">
            <el-form-item label="药品名称" prop="NAME">
                <el-input v-model="form.NAME"></el-input>
            </el-form-item>
            <el-form-item label="药品分类" prop="CATEGORY">
                <el-input v-model="form.CATEGORY"></el-input>
            </el-form-item>
            <el-form-item label="供应商" prop="supplier_info">
                <el-select v-model="form.supplier_info">
                    <el-option v-for="item in supplierList"
                            :label="item.name"
                            :value="item.supplierId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="单价" prop="UNIT_PRICE">
                <el-input v-model="form.UNIT_PRICE"></el-input>
                <el-link disabled>范围：（0.00-99999999.99）</el-link>
            </el-form-item>
            <el-form-item label="过期日期" prop="EXPIRATION_DATE">
                <el-input v-model="form.EXPIRATION_DATE"></el-input>
                <el-link disabled>格式：年-月-日</el-link>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#add',
        data: {
            form: {
                NAME: '',
                CATEGORY: '',
                supplier_info: '',
                UNIT_PRICE: '',
                EXPIRATION_DATE: ''
            },
            rules: {
                NAME: [
                    {required: true, message: '请输入药品名称', trigger: 'blur'},
                    {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                ],
                CATEGORY: [
                    {required: true, message: '请输入药品类型', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                supplier_info: [
                    {required: true, message: '请选择供应商', trigger: 'change'},
                ],
                UNIT_PRICE: [
                    {required: true, message: '请输入单价', trigger: 'blur'},
                    {pattern: /^\d{0,8}(\.\d{0,2})?$/, message: '请输入正确的格式', trigger: 'blur'}
                ],
                EXPIRATION_DATE: [
                    {required: true, message: '请输入过期日期', trigger: 'blur'},
                    {pattern: /^\d+\-\d{1,2}\-\d{1,2}$/, message: '请输入正确的格式', trigger: 'blur'}
                ]
            },
            showSuccessAlert: false,
            showErrorAlert: false,
            supplierList: [],
            pageIndex: 1,
            pageSize: 10,
            input: ""
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url: 'medicine_info?tag=add',
                            type: 'post',
                            data: this.form,
                            success: function (data) {
                                if (data == "success") {
                                    app.showSuccessAlert = true; // 显示成功提示框
                                } else {
                                    app.showErrorAlert = true;
                                }
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            goBack() {
                parent.vue.iframeUrl = 'medc-list.jsp';
            },
            getSuppliers(){
                $.ajax({
                    url: 'Supplier_infoServlet',
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                        search: this.input
                    },
                    success: (res) => {
                        this.supplierList = res.list;
                        console.log('供应商返回'+this.supplierList);
                    }
                })
            }
        },
        mounted(){
            this.getSuppliers();
        }
    });
</script>
</html>















